<template>
  <div class="app-container app-container-next">
    <el-card class="box-card" shadow="false">
      <div slot="header" class="clearfix">
        <router-link :to="{name: 'site-list'}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
      </div>
      <el-row>
        <el-col :span="18">
          <h4 style="margin: 0"><span style="color: #ff6347">复制店铺会清空已有的数据,请谨慎操作。</span></h4>
<!--          <p style="font-size: 14px;color: #d6903b">为确保数据正常，复制后请至 Item 系统进行同步确认操作。</p>-->
          <el-form ref="copyForm" :model="copyMap" :rules="rules" label-width="120px">
            <h4>店铺选择</h4>
            <el-form-item label="复制的店铺" prop="originSiteId">
              <el-select v-model="copyMap.originSiteId" placeholder="选择店铺" style="width: 400px" filterable>
                <el-option v-for="site in siteList" :value="site.id" :key="site.id" :label="site.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="接收的店铺" prop="targetSiteId">
              <el-select v-model="copyMap.targetSiteId" placeholder="选择店铺" style="width: 400px" filterable>
                <el-option v-for="site in siteList" :value="site.id" :key="site.id" :label="site.name">
                </el-option>
              </el-select>
            </el-form-item>
            <h4>数据选择</h4>
            <el-form-item label="" prop="goodsTableList">
              <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              <el-tree
                  ref="tree"
                  :default-expand-all="true"
                  :data="treeData"
                  show-checkbox
                  node-key="value"
                  :default-checked-keys="defaultKeys"
                  :props="defaultProps">
              </el-tree>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit('copyForm')" :loading="submitLoading">确认</el-button>
              <el-button @click="handleReset('copyForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {getAdminSiteList, copySite} from '@/api/site';

export default {
    name: 'site-copy',
    data () {
        return {
            checkAll: false,
            siteList: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            copyMap: {
                originSiteId: '',
                targetSiteId: '',
                tableList: []
            },
            // defaultKeys: ['spu', 'series', 'decoration', 'freight'],
            defaultKeys: [],
            // allKeys: ['spu', 'series', 'time_limit', 'price_reduce', 'coupon_code', 'decoration', 'custom_page', 'site_menu', 'material', 'freight'],
            allKeys: ['coupon_code', 'decoration', 'custom_page', 'site_menu', 'material', 'freight', 'series'],

            treeData: [
                {
                    name: '商品管理',
                    // disabled: true,
                    children: [
                        // {value: 'spu', name: '商品列表', disabled: true},
                        {value: 'series', name: '商品系列'}
                    ]
                },
                {
                    name: '营销管理',
                    children: [
                        // {value: 'time_limit', name: '限时活动'},
                        // {value: 'price_reduce', name: '满减活动'},
                        {value: 'coupon_code', name: '优惠码'}
                    ]
                },
                {
                    name: '店铺装修',
                    children: [
                        // {value: 'decoration', name: '主题装修', disabled: true},
                        {value: 'decoration', name: '主题装修'},
                        {value: 'custom_page', name: '自定义页面'},
                        {value: 'site_menu', name: '菜单导航'},
                        {value: 'material', name: '素材中心'}
                    ]
                },
                {
                    name: '店铺管理',
                    // disabled: true,
                    children: [
                        // {value: 'freight', name: '运费方案', disabled: true}
                        {value: 'freight', name: '运费方案'}

                    ]
                }
            ],
            rules: {
                originSiteId: [
                    {required: true, message: '请选择复制的店铺', trigger: 'blur'}
                ],
                targetSiteId: [
                    {required: true, message: '请选择接收的店铺', trigger: 'blur'}
                ]
            },
            submitLoading: false
        };
    },
    methods: {
        initData () {
            getAdminSiteList().then(res => {
                this.siteList = res.data;
            });
        },
        handleCheckAllChange (val) {
            this.copyMap.tableList = val ? this.allKeys : this.defaultKeys;
            this.$refs.tree.setCheckedKeys(this.copyMap.tableList);
        },
        handleSubmit (name) {
            this.copyMap.tableList = this.$refs.tree.getCheckedNodes().filter(res => !res.children).map(val => val.value);
            this.$refs[name].validate(valid => {
                if (valid) {
                    if (this.copyMap.originSiteId === this.copyMap.targetSiteId) {
                        this.$message.error('复制的店铺和接收的店铺不能相同!');
                        return;
                    }
                    if (this.copyMap.tableList.length === 0) {
                        this.$message.error('请选择需要复制的数据!');
                        return;
                    }
                    this.submitLoading = true;
                    copySite(this.copyMap).then(res => {
                        if (res.code === '200') {
                            this.submitLoading = false;
                            this.$message.success('复制成功');
                            this.$router.push({name: 'site-list'});
                        }
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        handleReset (name) {
            this.$router.push({name: 'site-list'});
        }

    },
    mounted () {
        this.initData();
    }
};

</script>

<style scoped>

</style>
